liankao/src/pages/ksfx/cjfx_cjd/[ykj_id].vue

<template>
  <div class="cjfx_cjd">
    <NavHeader />
    <bread-crumb />

    <div class="w-1200px m-auto flex flex-row justify-between mainCotent">
      <div class="w-188px">
        <leftSider :activeIndex="activeIndex" :ykjId="ykjId"  @parentClick="parentClick"/>
      </div>
      <div class="w-942px p-4 blueBg">
        <div class="flex items-center">
          <optionSelect  @optionClick="optionClick" />
        </div>
        <div class="mt-4 exportBtn">
          <el-button color="#003eee" type="primary" size="large" @click="exportBtn">导出</el-button>
        </div>

        <div class="h-218px mt-5px  bg-gray-500 py-4 pl-150px pr-100px perfectShow">
          <div class="h-full  flex justify-between" v-if="rangeData.length!=0">
            <div class="w-1/5 h-full bg-opacity-20 rounded flex-grow flex-shrink mr-2 singlepart" v-for="(item, index) in rangeData" :key="index">
              <div class="h-1/3 text-center py-4  RankLabel">
                <img :src="'/images/one'+(index+1)+'.png'" alt="">
              </div>
              <div class="text-sm mt-2 p-5px  RankBaseInfo">
                <p class="h-1/4 mt-3px overflow-ellipsis whitespace-nowrap" style="overflow: hidden;" :title="item.kh">考号：{{ item.kh }}</p>
                <p class="h-1/4 mt-3px overflow-ellipsis whitespace-nowrap" style="overflow: hidden;" :title="item.cj">成绩：{{item.cj}}分</p>
                <p class="h-1/4 mt-3px overflow-ellipsis whitespace-nowrap" style="overflow: hidden;" :title="item.mc">名次：{{ item.mc }}</p>
                <p class="h-1/4 mt-3px overflow-ellipsis whitespace-nowrap" style="overflow: hidden;" :title="item.xx">学校：{{ item.xx }}</p>
              </div>
            </div>
          </div>
          <div class="text-center " style="line-height:218px;" v-else>
            暂无排名~
          </div>
        </div>

        <el-table :data="tableData" :border="true" :show-header="true" :header-row-style="{ background: '#003eee' }">
          <el-table-column v-for="(item, index) in tableHeader" :key="index" :prop="item.prop" :label="item.label" :width="item.width">
            <template v-if="item.children">
              <el-table-column v-for="(childItem, childIndex) in item.children" :key="childIndex" :prop="childItem.prop" :label="childItem.label" :width="childItem.width"></el-table-column>
            </template>
          </el-table-column>
        </el-table>



      </div>
    </div>

    <commonFooter />
  </div>
</template>
<route lang="json">
{
  "meta": {
    "title": "考试分析",
    "breadcrumb": true
  }
}
</route>
<script lang="ts" setup>
import {cjfx_cjd_list } from '../apiItem';
import {user} from "~/store";
const route = useRoute();


// 侧边栏点击
const activeIndex = ref('1-1');
let ykjId = ref();
const parentClick = (val: string) => {
  activeIndex.value = val;
  ykjId.value = route.params.ykj_id;
}

const rangeData =ref([])
const tableHeader =ref([]);
const tableData = ref([]);

ykjId.value = route.params.ykj_id;

onMounted(() => {
  initData();
})

const school_id = ref("");
const grade_id = ref("");
const xueke_id = ref("");

// 初始化数据
const initData =() => {
  let transObj = {
    school_id:school_id.value,
    cm_id: grade_id.value,
    xueke_id: xueke_id.value,
    jh_id:route.params.ykj_id,//考试计划id
  }
  cjfx_cjd_list(transObj)
    .then(res => {
      if (res.code == "1") {
        rangeData.value = res.data.data.rangeData;
        tableHeader.value = res.data.data.tableHeader;
        if (res.data.data.tableData[0].length == '0') {
          tableData.value = [];
        } else {
          tableData.value = res.data.data.tableData;
        }
      }
    })
  .catch(error=>{console.log(error)})
}

//option筛选
const optionClick = (val: any, marke: any) => {
  if (marke == "scholl") {
    school_id.value = val;
  } else if (marke == "grade") {
    grade_id.value = val;
  } else {
    xueke_id.value = val;
  }
  initData();
}

//导出
const exportBtn = () => {
  let prefixedUrl = window.GLOBAL_CONFIG.web_pc;
  let fullUrl = prefixedUrl + '/openapi/echart/transcript.php?api=xls&token=' + user.value.token;
  window.open(fullUrl,'_blank')
}
</script>

<style lang="scss" scoped>
:deep(.is-group tr th){
  background: #003eee!important;
  color:#ffffff;
  border:0 ;
}
:deep(.el-sub-menu__title){
  background: #003eee;
  color: #fff;
}
.blueBg {
  background: #F1F7FF;
}

.whiteBG {
  background: #fff;
}
.mainCotent{
  min-height:665px;
}
.singlepart {
  background-color: rgba($color: #ffffff, $alpha: 0.2);
  color: #fff;
}

.listMain {
  max-height: 600px;
  overflow-x: auto;
}

.listMain_title {
  font-size: 16px;
  color: #fff;
  background: #003eee;
  overflow-y: auto;
}
.singleTitle {
  // flex: 1;
  // width: fit-content;
  line-height: 74px;
  width:100px;
  text-align: center;
}

.singleDupli {
  // flex: 1;
  width:150px;
}
.singleContentSec {
  // width: fit-content;
  // flex: 1;
  width:100px;
  line-height: 60px;
  text-align: center;
}

.singleDSec {
  // flex: 1;
  line-height: 60px;
  width:150px;
}

.secFullWidth {
  width: fit-content;
  flex: 1;
  text-align: center;
}
.perfectShow{
  background: url("/images/big_bg.png") no-repeat left top;
  background-size:cover;
}
.RankLabel{
  text-align: center;
  img{
    display: inline-block;
    width: 30%;
  }
}
</style>